<template>
  <div class="filter-view-container">
    <div class="filter-view-container-top">
      <div class="search-box">
        <van-search
          v-model="searchKey"
          show-action
          shape="round"
          placeholder="搜索客户名称"
          @search="onSearch"
          @clear="onClear"
        >
          <template #action>
            <span @click="closeFilter">取消</span>
          </template>
        </van-search>
      </div>

      <div
        class="filter-condition-box"
        v-show="showFilterCondition"
      >
        <van-dropdown-menu active-color="#3378FF">
          <van-dropdown-item
            v-model="type"
            :options="typeOptions"
            @change="changeType"
          />
          <van-dropdown-item
            v-model="industry"
            :options="industryOptions"
            @change="changeIndustry"
          />
        </van-dropdown-menu>
      </div>

      <div
        class="filter-area-result-box"
        v-show="showFilterCondition"
      >
        <div
          class="filter-area-name"
          v-for="(item, index) in filterArea"
          :key="index"
          @click="changeStep(item.step)"
        >
          <span :class="index !== (filterArea.length - 1) ? 'color-primary' : 'color-deep-gray'">{{ item.name }}</span>
          <van-icon
            name="arrow"
            v-if="index !== (filterArea.length - 1)"
          />
        </div>
      </div>
    </div>

    <div class="filter-view-container-bottom">
      <ul
        class="area-list-box"
        v-if="fileterStep === 1"
      >
        <li
          v-for="(item, index) in allCountryData"
          :key="index"
          @click="selectCountry(item)"
        >
          <span>{{ item.label }}</span>
          <van-icon name="arrow" />
        </li>
      </ul>

      <ul
        class="province-list-box"
        v-if="fileterStep === 3"
      >
        <li
          v-for="(item, index) in provinceData"
          :key="index"
          @click="selectProvince(item)"
        >
          <span>{{ item.label }}</span>
          <van-icon name="arrow" />
        </li>
      </ul>

      <ul
        class="customer-list-box"
        v-if="fileterStep === 4"
      >
        <template v-for="item in customerList">
          <li
            :class="{'acive-customer': item.checked}"
            v-if="item.product_line_total > 0"
            :key="item.id"
            @click="selectCustomer(item)"
          >
            <span>{{ item.customer }}（{{ item.product_line_total }}）</span>
            <van-icon
              name="success"
              v-show="item.checked"
            />
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import { Search } from 'vant';
import { DropdownMenu, DropdownItem } from 'vant';
import { countryArr, provinceArr, industryArr } from '../js/selectData.js';
import { getCustomerTypeList, getSearchCustomerListForApp } from '@/api/proLineManage.js';

export default {
  name: 'FilterCustomer',
  components: {
    [Search.name]: Search,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem
  },
  data() {
    return {
      searchKey: '',
      showFilterCondition: true,
      type: '',
      typeOptions: [
        {
          text: '所有客户类型',
          value: ''
        }
      ],
      industry: '',
      industryOptions: [
        {
          text: '所有行业',
          value: ''
        }
      ],
      allCountryData: countryArr,
      provinceData: provinceArr,
      filterArea: [
        {
          name: '全部',
          step: 1
        }
      ],
      fileterStep: 1, //1全部地区 2国家 3省份 4客户
      oldFilterStep: '',
      countryType: '', //1全球 2国内
      country: '',
      province: '',
      customerList: []
    };
  },
  created() {
    this.getCustomerTypeList();
    this.getIndustryList();
  },
  methods: {
    // 获取所有客户类型
    getCustomerTypeList() {
      getCustomerTypeList().then(res => {
        if (res.data && res.data.length) {
          let typeArr = [
            {
              text: '所有客户类型',
              value: ''
            }
          ];
          res.data.map(item => {
            typeArr.push({
              text: item.Name,
              value: item.Id
            });
          });
          this.typeOptions = typeArr;
          this.type = '';
        }
      });
    },
    // 获取所有行业
    getIndustryList() {
      let industryData = [
        {
          text: '所有行业',
          value: ''
        }
      ];
      industryArr.map(item => {
        let obj = {
          text: item.label,
          value: item.value
        };
        industryData.push(obj);
      });
      this.industryOptions = industryData;
      this.industry = '';
    },
    // 搜索
    onSearch() {
      if (this.searchKey) {
        this.oldFilterStep = JSON.parse(JSON.stringify(this.fileterStep));
        this.showFilterCondition = false;
        this.fileterStep = 4;
        this.getSearchCustomerListForApp();
      } else {
        this.$toast('请输入客户名称');
      }
    },
    // 取消
    onClear() {
      this.fileterStep = this.oldFilterStep;
      this.showFilterCondition = true;
    },
    // 切换客户类型
    changeType(value) {
      this.type = value;
      this.oldFilterStep = JSON.parse(JSON.stringify(this.fileterStep));
      this.fileterStep = 4;
      this.getSearchCustomerListForApp();
    },
    // 切换行业
    changeIndustry(value) {
      this.industry = value;
      this.oldFilterStep = JSON.parse(JSON.stringify(this.fileterStep));
      this.fileterStep = 4;
      this.getSearchCustomerListForApp();
    },
    // 切换选择步骤
    changeStep(step) {
      if (step === 1) {
        this.countryType = '';
        this.country = '';
        this.province = '';
        this.fileterStep = step;
        this.filterArea.length = step;
      }
      if (step === 2) {
        if (this.country === '中国') {
          this.province = '';
          this.fileterStep = 3;
          this.filterArea.length = step;
        }
      }
    },
    // 选择国家/地区
    selectCountry(item) {
      this.filterArea.push({
        name: item.label,
        step: 2
      });
      if (item.label === '中国') {
        this.countryType = 2;
        this.fileterStep = 3;
        this.country = '中国';
      } else {
        this.countryType = 1;
        this.fileterStep = 4;
        this.country = item.label;
        this.getSearchCustomerListForApp();
      }
    },
    // 选择省份
    selectProvince(item) {
      this.countryType = 2;
      this.filterArea.push({
        name: item.label,
        step: 3
      });
      this.province = item.label;
      this.fileterStep = 4;
      this.getSearchCustomerListForApp();
    },
    // 选择客户
    selectCustomer(item) {
      this.closeFilter();
      this.$parent.filterCustomer = {
        id: item.id,
        customer: item.customer
      };
      this.$parent.getProductLineList();
    },
    // 获取客户列表
    getSearchCustomerListForApp() {
      this.customerList = [];
      let params = {
        customer_name: this.searchKey,
        countries: this.country,
        provinces: this.province,
        country_type: this.countryType,
        customer_type_id: this.type,
        industry: this.industry
      };
      // 全球
      if (this.countryType === 1) {
        delete params.provinces;
      }
      getSearchCustomerListForApp(params).then(res => {
        if (res.data.list && res.data.list.length) {
          res.data.list.map(item => {
            item.checked = false;
          });
          this.customerList = res.data.list;
        }
      });
    },
    // 关闭筛选
    closeFilter() {
      this.$parent.showFilterCustomer = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-view-container {
  position: absolute;
  top: 1.226667rem;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 1.226667rem);
  background-color: #fff;

  .filter-view-container-top {
    flex-shrink: 0;

    .search-box {
    }

    .filter-condition-box {
      ::v-deep .van-dropdown-menu__bar {
        box-shadow: unset;
        border-bottom: 1px solid #f2f6fc;
      }
    }

    .filter-area-result-box {
      display: flex;
      align-items: center;
      width: 100%;
      height: 0.906667rem;
      padding: 0 0.426667rem;
      background-color: #f6f6f6;

      .filter-area-name {
        display: flex;
        align-items: center;
        font-size: 0.32rem;

        .van-icon {
          margin: 0 0.16rem;
          color: #cccccc;
        }
      }
    }
  }

  .filter-view-container-bottom {
    flex: 1;
    padding: 0 0.426667rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    .area-list-box,
    .province-list-box {
      width: 100%;
      height: 100%;

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0.32rem 0;
        font-size: 0.373333rem;
        color: #333333;
        border-bottom: 1px solid #f2f6fc;

        .van-icon {
          color: #cccccc;
        }
      }
    }

    .customer-list-box {
      width: 100%;
      height: 100%;

      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0.32rem 0;
        font-size: 0.373333rem;
        color: #333333;
        border-bottom: 1px solid #f2f6fc;

        .van-icon {
          font-size: 0.373333rem;
        }

        &.acive-customer {
          color: var(--color-primary);
        }
      }
    }
  }

  .search-box {
  }
}
</style>